document.getElementById('addRow').addEventListener('click', function() {
    const table = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
    const newRow = table.insertRow();

    const cells = [
        '<input type="number" name="height" required>',
        '<input type="number" name="angleDegreesLeft1" required>',
        '<input type="number" name="angleMinutesLeft1" required>',
        '<input type="number" name="angleSecondsLeft1" required>',
        '<input type="number" name="angleDegreesRight1" required>',
        '<input type="number" name="angleMinutesRight1" required>',
        '<input type="number" name="angleSecondsRight1" required>',
        '<input type="number" name="angleDegreesLeft2" required>',
        '<input type="number" name="angleMinutesLeft2" required>',
        '<input type="number" name="angleSecondsLeft2" required>',
        '<input type="number" name="angleDegreesRight2" required>',
        '<input type="number" name="angleMinutesRight2" required>',
        '<input type="number" name="angleSecondsRight2" required>',
        '<input type="number" name="angleDegreesLeft3" required>',
        '<input type="number" name="angleMinutesLeft3" required>',
        '<input type="number" name="angleSecondsLeft3" required>',
        '<input type="number" name="angleDegreesRight3" required>',
        '<input type="number" name="angleMinutesRight3" required>',
        '<input type="number" name="angleSecondsRight3" required>',
        '<button type="button" class="removeRow">Удалить</button>'
    ];

    cells.forEach(function(cell, index) {
        const newCell = newRow.insertCell(index);
        newCell.innerHTML = cell;
    });

    attachRemoveRowHandlers();
});

function attachRemoveRowHandlers() {
    const removeButtons = document.getElementsByClassName('removeRow');
    for (let button of removeButtons) {
        button.addEventListener('click', function() {
            const row = this.parentElement.parentElement;
            row.parentElement.removeChild(row);
        });
    }
}

document.getElementById('measurementForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const amsName = document.getElementById('amsName').value;

    const rows = document.getElementById('dataTable').getElementsByTagName('tbody')[0].rows;
    const angleDataList = [];

    for (let row of rows) {
        const height = row.querySelector('[name="height"]').value;
        const angleDegreesLeft1 = row.querySelector('[name="angleDegreesLeft1"]').value;
        const angleMinutesLeft1 = row.querySelector('[name="angleMinutesLeft1"]').value;
        const angleSecondsLeft1 = row.querySelector('[name="angleSecondsLeft1"]').value;
        const angleDegreesRight1 = row.querySelector('[name="angleDegreesRight1"]').value;
        const angleMinutesRight1 = row.querySelector('[name="angleMinutesRight1"]').value;
        const angleSecondsRight1 = row.querySelector('[name="angleSecondsRight1"]').value;
        const angleDegreesLeft2 = row.querySelector('[name="angleDegreesLeft2"]').value;
        const angleMinutesLeft2 = row.querySelector('[name="angleMinutesLeft2"]').value;
        const angleSecondsLeft2 = row.querySelector('[name="angleSecondsLeft2"]').value;
        const angleDegreesRight2 = row.querySelector('[name="angleDegreesRight2"]').value;
        const angleMinutesRight2 = row.querySelector('[name="angleMinutesRight2"]').value;
        const angleSecondsRight2 = row.querySelector('[name="angleSecondsRight2"]').value;
        const angleDegreesLeft3 = row.querySelector('[name="angleDegreesLeft3"]').value;
        const angleMinutesLeft3 = row.querySelector('[name="angleMinutesLeft3"]').value;
        const angleSecondsLeft3 = row.querySelector('[name="angleSecondsLeft3"]').value;
        const angleDegreesRight3 = row.querySelector('[name="angleDegreesRight3"]').value;
        const angleMinutesRight3 = row.querySelector('[name="angleMinutesRight3"]').value;
        const angleSecondsRight3 = row.querySelector('[name="angleSecondsRight3"]').value;

        angleDataList.push({
            height,
            angleDegreesLeft1,
            angleMinutesLeft1,
            angleSecondsLeft1,
            angleDegreesRight1,
            angleMinutesRight1,
            angleSecondsRight1,
            angleDegreesLeft2,
            angleMinutesLeft2,
            angleSecondsLeft2,
            angleDegreesRight2,
            angleMinutesRight2,
            angleSecondsRight2,
            angleDegreesLeft3,
            angleMinutesLeft3,
            angleSecondsLeft3,
            angleDegreesRight3,
            angleMinutesRight3,
            angleSecondsRight3
        });
    }

    fetch('/api/measurements', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ amsName, angleDataList })
    }).then(response => response.json())
        .then(data => console.log(data));
});

document.getElementById('calculateButton').addEventListener('click', function() {
    fetch('/api/measurements/calculate?measurementId=1&isClockwise=true')
        .then(response => response.json())
        .then(data => drawResultantVector(data));
});

function drawResultantVector(vector) {
    const canvas = document.getElementById('vectorCanvas');
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.beginPath();
    context.moveTo(canvas.width / 2, canvas.height / 2);
    context.lineTo(canvas.width / 2 + vector[0], canvas.height / 2 - vector[1]);
    context.strokeStyle = 'red';
    context.lineWidth = 2;
    context.stroke();
}

attachRemoveRowHandlers();
